import React, { useEffect } from "react";
import { del, getById } from "../../services/student";


export default function List(props) {
   
    useEffect(() => {
        props.show();
    },[props.students.length]);
    
    const handleUpdate = async (id) => {
       let data = await getById(id);
       props.setStudent(data.data);
    }
    const handleDel = async (id) => {
        await del(id);
        props.show();
    }
    return (
        <table border="1">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {
                    props.students.map((item) => <tr>
                        <td>{item.name}</td>
                        <td>{item.gender}</td>
                        <td>{item.age}</td>
                        <td>
                            <input type="button" value="修改" onClick={() => handleUpdate(item._id)} />
                            <input type="button" value="删除" onClick={() => handleDel(item._id)} />
                        </td>
                    </tr>)
                }
               
            </tbody>
        </table>
    );
}
